<!DOCTYPE html>
<html>

<head>
    <title>商品列表</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
            var currentPage=1;
            var totalPage;
            var dataList=[];//定义为一个空数组
            //发送请求获取到所有的商品，并进行渲染
            $.get("/products/"+currentPage+"/selectForList.do", function (data) {
                console.log(data);
                $.merge(dataList,data.list)
                totalPage=data.pages;
                $("#allProducts").renderValues({list:dataList},{
                    setHref:function (items,value) {
                        $(items).attr("href",$(items).attr("href")+value);
                        console.log(value);
                    }
                });
                currentPage+=1;
            })

            //屏幕滚动事件
            $(window).scroll(function () {
                // console.log($(window).height() +"+"+ $(window).scrollTop() +">="+ $(document).height());
                if ($(window).height() + $(window).scrollTop()+1 >= $(document).height()) {
                    if (currentPage <= totalPage) {
                        //发送请求获取到所有的商品，并进行渲染
                        $.get("/products/"+currentPage+"/selectForList.do", function (data) {
                            $.merge(dataList,data.list);
                            $("#allProducts").renderValues({list:dataList},{
                                setHref:function (items,value) {
                                    $(items).attr("href",$(items).attr("href")+value);
                                    console.log(value);
                                }
                            });
                            currentPage+=1;
                        });
                     }
                     else{
                        $(document).dialog({
                            type : 'toast',
                            content: '<span class="info-text">到底了</span>',
                            autoClose: 2500
                        });
                    }
                }
            });

        })
    </script>
</head>

<body>


<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜旅游">
            </div>
        </div>
    </div>
</div>


<!--综合推荐 开始-->
<div class="comprehensive-recommend">

    <div class="pl-cr-list clearfix"  id="allProducts">
        <b><i class="fa  fa-2x"><strong>积分商城</strong></i></b><h4></h4>
            <div class="panel panel-default strategyCommend " render-loop="list" >
                <div class="pl-cr-item panel-heading">
                    <a href="/goodDetail.html?id=" render-fun="setHref" render-key="list.id">
                        <img id="coverUrl" width="100%" height="200px" render-src="list.covelUrl" />
                    </a>
                    <a class="pl-cr-pic" href="/goodDetail.html?id=" target="_blank" render-html="list.title">
                    </a>
                    <a class="pl-cr-link" href="http://ticket.lvmama.com/scenic-110046" target="_blank" title="周村古商城"
                       render-html="list.name">
                    </a>
                    <div class="pl-cr-bottom clearfix">
                        <div class="pl-cr-price">
                            <i>&yen;</i><em render-html="list.price"></em><b>积分起</b>
                        </div>
                        <div class="pl-cr-labels">
                            <span class="pl-cr-label">促销</span>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>

</body>
</html>